<template>
  <el-dialog
    top="15%"
    class="publicDialog"
    :close-on-click-modal="false"
    :visible.sync="centerDialogVisible"
    width="471px"
    title="设置"
  >
    <div class="show-box">
      <showDataC :listData="newallData" typeName="全部列表字段" ref="leftList"></showDataC>
      <div class="show-box-button">
        <div><el-button @click="addRigth" size="mini">加入右侧<i class="el-icon-arrow-right"></i></el-button></div>
        <div style="margin-top:20px"><el-button @click="addLeft" size="mini"><i class="el-icon-arrow-left"></i>加入左侧</el-button></div>
      </div>
      <showDataC :listData="saveData" typeName="展示列表字段" ref="rightList"></showDataC>
    </div>
    <span slot="footer" class="dialog-footer">
      <template v-if="!hasSlot">
        <el-button size="small" type="primary" @click="handleConfirm">确定</el-button>
        <el-button size="small" @click="handleCencel">取消</el-button>
      </template>
      <slot v-else></slot>
    </span>
  </el-dialog>
</template>

<script>
import showDataC from './showData.vue'
export default {
  components:{showDataC},
  props: {
    allData: {
      type: Array,
    },
    selectedData: {
      type: Array,
    },
  },
  data() {
    return {
      newallData:JSON.parse(JSON.stringify(this.allData)),
      centerDialogVisible: false,
      saveData:[]
    }
  },
  watch:{
    centerDialogVisible(val){
      if(!val){
        this.saveData=[]
        this.$refs.leftList.checkedList = []
        this.$refs.rightList.checkedList = []
        this.$refs.leftList.checkAll = false
        this.$refs.rightList.checkAll = false
      }
    }
  },
  computed: {
    hasSlot() {
      return !!this.$slots.default;
    },
  },
  methods: {
    init() {
      this.centerDialogVisible = true;
      this.saveData=JSON.parse(JSON.stringify(this.selectedData))
    },
    addRigth(){
      let selectedData = this.$refs.leftList.checkedList
      let oldShowData = this.saveData.map(item=>item.field)
      let allShow = [...oldShowData,...selectedData]
      this.saveData = this.newallData.filter(item=>{
        return allShow.includes(item.field)
      })
      console.log('@@',this.saveData);
    },
    addLeft(){
      let selectedData = this.$refs.rightList.checkedList
      console.log('@@',selectedData);
      this.saveData = this.saveData.filter(item=>{
        return !selectedData.includes(item.field)
      })
      this.$refs.rightList.checkedList = []
    },

    handleConfirm() {
      this.centerDialogVisible = false;
      this.$emit("comfirm",JSON.parse(JSON.stringify(this.saveData)));
    },
    handleCencel() {
      this.centerDialogVisible = false;
      this.$emit("cencel");
    },
  },
};
</script>

<style scoped lang="less">
.publicDialog {
  /deep/.el-dialog {
    // border-radius: 8px;
    overflow: hidden;
    .el-dialog__header {
      padding: 10px 20px;
      background-color: #0871e8;
      .el-dialog__title{
        font-weight: 650;
        font-size: 14px;
        color: #FFFFFF;
        text-align: left;
        // line-height: 22px;
      }
      .el-dialog__headerbtn {
        top: 10px;
        .el-dialog__close{
          color:#FFFFFF;
          font-size: 25px;
        }
      }
    }
    .el-dialog__body {
      padding: 20px;
    }
    .el-dialog__footer {
      display: flex;
      justify-content: center;
    }
  }
}
.show-box{
  margin: 5px 0;
  display: flex;
  align-items: center;
  .show-box-button{
    display: flex;
    flex-flow: column;
    margin:0 10px;
  }
}

</style>